<!DOCTYPE html>
<!--**
 *Created by wf_H on 2018/8/6.
 *by:web_hwf@sina.com
 *-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>工作台</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/css/zui.min.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/css/zui-theme.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/hover.css">

    <link rel="stylesheet" href="../style/h-base.css">
    <link rel="stylesheet" href="../style/h-index.css">

</head>
<body class="childrenBody">


<div class="row">
    <div class="col-lg-7 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">产品与服务应用统计</div>
            <a href="javascript:;" class="text_item pull-left active"><span>本月</span></a>
            <a href="javascript:;" class="text_item pull-left "><span>今年</span></a>
            <button class="btn btn-primary btn_add pull-right" style="margin-top: 10px">更多 &gt</button>
        </div>
        <div class="gzt_list wk_gzt_list">
            <a href="javascript:;" class="gzt_item">
                <p class="wgl_title1">职工补贴云产品</p>
                <p class="wgl_title2">项目单数</p>
                <p class="wgl_title3">35</p>
            </a>
            <a href="javascript:;" class="gzt_item">
                <p class="wgl_title1">职工培训云产品</p>
                <p class="wgl_title2">订单总数</p>
                <p class="wgl_title3">208</p>
            </a>
            <a href="javascript:;" class="gzt_item">
                <p class="wgl_title1">职工票券云产品</p>
                <p class="wgl_title2">订单总数</p>
                <p class="wgl_title3">13</p>
            </a>
            <a href="javascript:;" class="gzt_item">
                <p class="wgl_title1">入网情况</p>
                <p class="wgl_title2">已部署平台</p>
                <p class="wgl_title3">8</p>
            </a>
        </div>
        <div class="wk_gzt_list2">
            <a href="javascript:;" class="wgl_item">
                <p>服务费总额</p>
                <p class="wgl_title4">125万</p>
            </a>
            <a href="javascript:;" class="wgl_item">
                <p>待回款服务费</p>
                <p class="wgl_title4">67万</p>
            </a>
            <a href="javascript:;" class="wgl_item">
                <p>已入网企业数</p>
                <p class="wgl_title4">2246</p>
            </a>
            <a href="javascript:;" class="wgl_item">
                <p>已注册职工数</p>
                <p class="wgl_title4">74146</p>
            </a>
        </div>
    </div>
    <div class="col-lg-5 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">业务最新进展</div>
        </div>
        <div class="gzt_list">
            <ul class="wk_yewu_ul">
                <li>
                    <a href="#">
                        <em class="pull-left">业务员张聪费创建了广州远程教育有限...</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">总管理员谢巍创建了广东职工教育网</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">中山市总工会补贴已回款8.35万</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">荆州市总工会购买了补贴服务</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">辽宁省总工会购买300张学习卡</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">自文明诞生之初，人类就开始记录自己周...</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">小时候我们很多经验都是来自于寓言故事...</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <em class="pull-left">小时候我们很多经验都是来自于寓言故事...</em>
                        <i class="pull-right">2018-07-13</i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">部署情况</div>
        </div>
        <div class="zxdt_list">
            <div class="wk_bushu row">
                <div class="col-lg-7 col-md-12">
                    <button id="open_qg" class="btn btn_add" style="position: absolute ;left: 20px;top: 50px;z-index: 999;display: none;">&lt 返回全国</button>
                    <div id="wk_map" style="height:850px;width: 80%;margin: 0 auto"></div>
                </div>
                <div class="col-lg-5 col-md-12 top_xz">
                    <table class="table table-bordered ">
                        <tbody>
                        <tr>
                            <td rowspan="2" class="index_tr">广东省总工会</td>
                            <td>运行状态</td>
                            <td>职工总数</td>
                            <td>企业总数</td>
                            <td>补贴发布次数</td>
                            <td>领取补助人数</td>
                            <td>领取补助总额</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>4</td>
                            <td>4</td>
                            <td>4</td>
                            <td>2</td>
                            <td>4</td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-bordered table_index">
                        <thead>
                        <tr>
                            <th>工会</th>
                            <th>运行状态</th>
                            <th>职工总数</th>
                            <th>企业总数</th>
                            <th>补贴发布次数</th>
                            <th>领取补助人数</th>
                            <th>领取补助总额</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>广东省总工会</td>
                            <td>已部署</td>
                            <td>xxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                        </tr>
                        <tr>
                            <td>广东省总工会</td>
                            <td>已部署</td>
                            <td>xxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                        </tr>
                        <tr>
                            <td>广东省总工会</td>
                            <td>已部署</td>
                            <td>xxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">业绩统计</div>
            <a href="javascript:;" class="text_item pull-left active"><span>今日</span></a>
            <a href="javascript:;" class="text_item pull-left"><span>本周</span></a>
            <a href="javascript:;" class="text_item pull-left "><span>本月</span></a>
            <button class="btn btn-primary btn_add pull-right" style="margin-top: 10px">更多 &gt</button>
        </div>
        <div class="zxdt_list ">
            <table class="wk_yewu_tab" width="100%">
                <thead>
                    <tr>
                        <th align="left">部门</th>
                        <th>业务员</th>
                        <th>已入网客户</th>
                        <th>已入网职工</th>
                        <th>自主拓展客户</th>
                        <th>上级分配的客户</th>
                        <th>已转化客户</th>
                        <th>已促成订单</th>
                        <th>已促成订单总额</th>
                    </tr>
                </thead>
                <tbody>
                    <tr bgcolor="#f6f8fa">
                        <td rowspan="3" align="left">市场一线</td>
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                    <tr bgcolor="#f6f8fa">
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                    <tr bgcolor="#f6f8fa">
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                    <tr>
                        <td rowspan="3" align="left">市场二线</td>
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                    <tr>
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                    <tr>
                        <td>王强</td>
                        <td>2200人</td>
                        <td>2200人</td>
                        <td>0人</td>
                        <td>2200人</td>
                        <td>220人</td>
                        <td>1120</td>
                        <td>￥22万</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">企业转化情况</div>
        </div>
        <div class="zxdt_list">
            <div class="wk_chart">
                <div class="pull-right wk_chart_img wk_chart_img01">
                </div>
                <div class="wk_chart_cont">
                    <div class="wkcc_list">
                        <p>企业库</p>
                        <span>总数2300家</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已入网企业1250家</p>
                        <span>入网率50%</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已购买服务企业525家</p>
                        <span>购买率50%</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已付款企业102</p>
                        <span>付款率20%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-12 col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">职工服务情况</div>
        </div>
        <div class="zxdt_list">
            <div class="wk_chart">
                <div class="pull-right wk_chart_img wk_chart_img02">
                </div>
                <div class="wk_chart_cont">
                    <div class="wkcc_list">
                        <p>已注册</p>
                        <span>职工15000人</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已被认领职工7500个</p>
                        <span>认领率50%</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已申报服务职工10000个</p>
                        <span>申报率50%</span>
                    </div>
                    <div class="wkcc_list">
                        <p>已享受服务职工7000</p>
                        <span>服务率70%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/js/zui.min.js"></script>

<script>


    $(function () {
        $('.nav_list').on('click', 'a', function () {
            $(this).addClass('active').siblings().removeClass('active');
        })


    })
</script>
<!-- map -->
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('wk_map'));
    //各省份的地图json文件
    var provinces = {
        '上海': './js/json/data-1482909900836-H1BC_1WHg.json',
        '河北': './js/json/data-1482909799572-Hkgu_yWSg.json',
        '山西': './js/json/data-1482909909703-SyCA_JbSg.json',
        '内蒙古': './js/json/data-1482909841923-rkqqdyZSe.json',
        '辽宁': './js/json/data-1482909836074-rJV9O1-Hg.json',
        '吉林': './js/json/data-1482909832739-rJ-cdy-Hx.json',
        '黑龙江': './js/json/data-1482909803892-Hy4__J-Sx.json',
        '江苏': './js/json/data-1482909823260-HkDtOJZBx.json',
        '浙江': './js/json/data-1482909960637-rkZMYkZBx.json',
        '安徽': './js/json/data-1482909768458-HJlU_yWBe.json',
        '福建': './js/json/data-1478782908884-B1H6yezWe.json',
        '江西': './js/json/data-1482909827542-r12YOJWHe.json',
        '山东': './js/json/data-1482909892121-BJ3auk-Se.json',
        '河南': './js/json/data-1482909807135-SJPudkWre.json',
        '湖北': './js/json/data-1482909813213-Hy6u_kbrl.json',
        '湖南': './js/json/data-1482909818685-H17FOkZSl.json',
        '广东': './js/json/data-1482909784051-BJgwuy-Sl.json',
        '广西': './js/json/data-1482909787648-SyEPuJbSg.json',
        '海南': './js/json/data-1482909796480-H12P_J-Bg.json',
        '四川': './js/json/data-1482909931094-H17eKk-rg.json',
        '贵州': './js/json/data-1482909791334-Bkwvd1bBe.json',
        '云南': './js/json/data-1482909957601-HkA-FyWSx.json',
        '西藏': './js/json/data-1482927407942-SkOV6Qbrl.json',
        '陕西': './js/json/data-1482909918961-BJw1FyZHg.json',
        '甘肃': './js/json/data-1482909780863-r1aIdyWHl.json',
        '青海': './js/json/data-1482909853618-B1IiOyZSl.json',
        '宁夏': './js/json/data-1482909848690-HJWiuy-Bg.json',
        '新疆': './js/json/data-1482909952731-B1YZKkbBx.json',
        '北京': './js/json/data-1482818963027-Hko9SKJrg.json',
        '天津': './js/json/data-1482909944620-r1-WKyWHg.json',
        '重庆': './js/json/data-1482909775470-HJDIdk-Se.json',
        '香港': './js/json/data-1461584707906-r1hSmtsx.json',
        '澳门': './js/json/data-1482909771696-ByVIdJWBx.json'
    };

    //各省份的数据
    var allData = [] ;
    var qg = [{
        name: '北京', value: 1
    }, {
        name: '天津', value: 1
    }, {
        name: '上海', value: 1
    }, {
        name: '重庆', value: 1
    }, {
        name: '河北', value: 1
    }, {
        name: '河南', value: 1
    }, {
        name: '云南', value: 1
    }, {
        name: '辽宁', value: 1
    }, {
        name: '黑龙江', value: 1
    }, {
        name: '湖南', value: 2
    }, {
        name: '安徽', value: 1
    }, {
        name: '山东', value: 1
    }, {
        name: '新疆', value: 3
    }, {
        name: '江苏', value: 2
    }, {
        name: '浙江', value: 1
    }, {
        name: '江西', value: 1
    }, {
        name: '湖北', value: 2
    }, {
        name: '广西', value: 2
    }, {
        name: '甘肃', value: 2
    }, {
        name: '山西', value: 1
    }, {
        name: '内蒙古', value: 1
    }, {
        name: '陕西', value: 1
    }, {
        name: '吉林', value: 2
    }, {
        name: '福建', value: 1
    }, {
        name: '贵州', value: 2
    }, {
        name: '广东', value: 1
    }, {
        name: '青海', value: 1
    }, {
        name: '西藏', value: 3
    }, {
        name: '四川', value: 2
    }, {
        name: '宁夏', value: 1
    }, {
        name: '海南', value: 1
    }, {
        name: '台湾', value: 3
    }, {
        name: '香港', value: 2
    }, {
        name: '澳门', value: 1
    }];
    allData = qg ;


    loadMap('./js/json/data-1527045631990-r1dZ0IM1X.json', 'china');//初始化全国地图

    var timeFn = null;

    //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
    myChart.on('click', function(params) {
        clearTimeout(timeFn);
        //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
        timeFn = setTimeout(function() {
            var name = params.name; //地区name
            var mapCode = provinces[name]; //地区的json数据
            if (!mapCode) {
                console.log('没有下一级的')
                return;
            }


            //例如
            allData = [{
                name: '广州市', value: 1
            }, {
                name: '佛山市', value: 3
            }, {
                name: '惠州市', value: 2
            }, {
                name: '清远市', value: 1
            }] ;

            $('#open_qg').show() ; //显示


            loadMap(mapCode, name);

        }, 250);
    });


    // 绑定双击事件，返回全国地图
    myChart.on('dblclick', function(params) {
        //当双击事件发生时，清除单击事件，仅响应双击事件
        clearTimeout(timeFn);
        $('#open_qg').hide() ; //隐藏按钮
        openChina() ;
    });

    $('#open_qg').click(function () {
        $('#open_qg').hide() ; //隐藏按钮s
        openChina() ;
    })

    function openChina() {//返回全国地图
        allData = qg ;
        loadMap('./js/json/data-1527045631990-r1dZ0IM1X.json', 'china');
    }

    /**
     获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
     @params {String} mapCode:json数据的地址
     @params {String} name: 地图名称
     */
    function loadMap(mapCode, name) {
        $.get(mapCode, function(data) {
            if (data) {
                echarts.registerMap(name, data);
                var option = {
                    tooltip: {
                        show: true,
                        formatter: function(params) {
                            if (params.data) return params.name
                        },
                    },
                    roam:true,
                    dataRange: {
                        min: 0,
                        max: 5,
                        x: '80%',
                        y: '5%',
                        splitList: [
                            {
                                start:0,
                                end: 1.5,
                                label: '未部署',
                                color: '#A6A6A6'
                            },{
                                start: 1.5,
                                end: 2.5,
                                label: '转化中',
                                color: '#D9612C'
                            },{
                                start: 2.5,
                                end: 3.5,
                                label: '已部署',
                                color: '#4886C0'
                            }
                        ]
                    },
                    roamController: {
                        show: true,
                        x: 'right',
                        mapTypeControl: {
                            name: true
                        }
                    },
                    series: [{
                        name: 'MAP',
                        type: 'map',
                        mapType: name,
                        roam: false,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }

                        },
                        data: allData
                    }]
                };
                myChart.setOption(option);
            } else {
                alert('无法加载该地图');
            }
        });
    }

    window.addEventListener("resize", function () {//自适应
        myChart.resize();
    });
    //用于使chart自适应高度和宽度
    window.onresize = function () {
        //重置容器高宽
        myChart.resize();
    };

</script>

</body>
</html>